const container = document.getElementById('container')
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
addsquare()
function addsquare(){
    for(let i = 0; i < 500; i++){
        let square = document.createElement('div')
        square.classList.add('square')
        square.addEventListener('mouseover', () => {
            square.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]
            square.style.boxShadow = `0 0 10px ${colors[Math.floor(Math.random() * colors.length)]}`
        })
        square.addEventListener('mouseout', () => {
            square.style.backgroundColor = '#1d1d1d'
            square.style.boxShadow = '0 0 2px black'
        })
        container.appendChild(square)
    }
}